<template>
  <div class="card" style="padding:10px" >
    <div style="margin: 10px">
  <div id="myChart" :style="{width: '800px', height: '800px'}"></div>
    </div>
  </div>
</template>
<script >
import * as echarts from 'echarts';
import request from "../../utils/request";

//树状图
export default {
  name: 'BingEcharts',

  //代码写道mounted里边  相当于初始化函数
  mounted(){
    request.get("/ans/echarts",).then(res=>{

      console.log(res)

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'Mbti人格类型分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },

        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: res
          }
        ]
      })
    });
  }
}
</script>

